<template>
  <Panel>
    <template v-slot:header>
      <div>修改密码</div>
    </template>
    <template #con>
      <el-form
        :model="passForm"
        status-icon
        :rules="rules"
        ref="passForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="原密码" prop="oldPass">
          <el-input
            type="text"
            v-model="passForm.oldPass"
            autocomplete="off"
            @blur="checkoldPass"
          ></el-input>
        </el-form-item>

        <el-form-item label="新密码" prop="pwd">
          <el-input
            type="password"
            v-model="passForm.pwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="checkPwd">
          <el-input
            type="password"
            v-model="passForm.checkPwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('passForm')"
            >修改</el-button
          >
          <el-button @click="resetForm('passForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
  </Panel>
</template>

<script>
import { checkOldPass, editPass } from "../../api/user.js";
import local from "../../utils/local";
import {
  validatenewPwd,
  validatePwd,
  validatecheckPwd,
} from "../../utils/validata";

export default {
  data() {
    return {
      passForm: {
        oldPass: "",
        pwd: "",
        checkPwd: "",
      },

      rules: {
        oldPass: [{ validator: validatePwd, trigger: "blur" }],
        pwd: [{ validator: validatenewPwd(this), trigger: "blur" }],
        checkPwd: [{ validator: validatecheckPwd(this), trigger: "blur" }],
      },
      // 如果旧密码是正确的，就保存一个状态
      oldPassSata: false,
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.oldPassSata) {
            const data = await editPass({
              newPwd: this.passForm.pwd,
            });
            if (data.code === 0) {
              this.$message({
                message: data.msg,
                type: "success",
              });
              local.del("token");
              this.$router.push("/login");
            }
          } else {
            this.$message({
              message: "原来密码错误",
              type: "error",
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    async checkoldPass() {
      const data = await checkOldPass({
        oldPwd: this.passForm.oldPass,
      });
      // 将来在修改密码请求的时候，需要知道是否原密码正确
      if (data.code === "00") {
        // 把当前的这个状态给存起来
        this.oldPassSata = true;
      } else {
        this.$message({
          message: data.msg,
          type: "error",
        });
        this.oldPassSata = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  width: 400px;
  padding: 20px;
}
</style>